import React, { createRef } from 'react'
import { withRouter } from 'react-router-dom'
import { Form, Input, Button, Checkbox, Card, message } from 'antd'

import logo from '../../assets/logo.png'
import './index.scss'

import { http } from '../../utils/http'
import { setToken } from '../../utils/token'

class Login extends React.Component {
  formRef = createRef()

  onFinish = async values => {
    const { remeber, ...login } = values
    try {
      const res = await http.post('/authorizations', login)
      console.log('finish', res, this.props)
      setToken(res.data.data.token)
      this.props.history.push('/')
    } catch (e) {
      message.error(e.response.data.message || '登录失败')
    }
  }
  onFinishFailed = () => {}

  render() {
    return (
      <div className="login">
        <Card className="login-container">
          <img className="login-logo" src={logo} alt="" />
          <Form
            ref={this.formRef}
            name="normal_login"
            initialValues={{
              mobile: '13911111111',
              code: '246810',
              remember: true
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="mobile"
              rules={[
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号码格式不对',
                  validateTrigger: 'onBlur'
                },
                { required: true, message: '请输入手机号' }
              ]}
              validateTrigger={['onBlur', 'onChange']}
            >
              <Input size="large" placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item
              name="code"
              rules={[
                { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
                { required: true, message: '请输入验证码' }
              ]}
              validateTrigger={['onBlur', 'onChange']}
            >
              <Input size="large" placeholder="请输入验证码" maxLength={6} />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox className="login-checkbox-label">
                  我已阅读并同意「用户协议」和「隐私条款」
                </Checkbox>
              </Form.Item>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" size="large" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}

export default withRouter(Login)
